<template>
  <div class="da">

    <!--    顶部盒子-->
    <div class="top">
      <!--      包围左箭头和搜索框-->
      <div class="top1">
        <!--      左箭头-->
        <van-icon class="leftjiantou" size="20px" @click="fanhui" name="arrow-left"/>
        <!--      搜索框-->
        <template>
          <van-search
              v-model="searchValue"
              placeholder="请输入或扫描单号"
              clearable
              right-icon="scan">
            <!-- 通过自定义插槽来移除放大镜图标 -->
            <template #left-icon>
              <!-- 可以插入一个空的 span 或者其他不显示的元素 -->
              <span></span>
            </template>
          </van-search>
        </template>
      </div>
      <!--      顶部搜索-->
      <span @click="getList()" class="zi2">搜索</span>
    </div>
    <!--    包裹详情盒子-->
    <div class="detail" v-for="i in baoguostatus" :key="i.id">
      <!--      上部分-->
      <div class="shang">
        <!--        派件成功展示-->
        <div class="yellow">
          <button v-if="i.status==2" class="tixing">第{{ i.num }}次派件成功</button>
        </div>
        <div class="shang1">
          <img src="https://myimagezxy1.oss-cn-beijing.aliyuncs.com/lsz/%E7%9B%92%E5%AD%90">
        </div>

        <div class="shang2">
          <h4 class="zi3">
            {{
              i.status == 1 ? '代取件' : (i.status == 2 ? '已取件' : (i.status == 3 ? '滞留件' : (i.status == 4 ? '已撤回' : (i.status == 5 ? '已超时' : '已完结'))))
            }}</h4>
          <div class="shang3">
            <p v-if="i.status==3" class="zi1">(超过{{ i.zhiliu }}天未取)</p>
          </div>
          <div class="shang4">
            <p>{{ i.phone | formatPhoneNumber }}</p>
          </div>
        </div>
        <div class="shang5">
          <p class="zi4" @click="tiaozhuan(i.id)">详情</p>
          <van-icon class="icon1" name="arrow"/>
        </div>
      </div>

      <!--      中部分-->
      <div class="zhong">
        <div class="zhong1">
          <p class="zi5">费用类型</p>
          <p class="zi6">单笔收费</p>
        </div>
        <div class="zhong1">
          <p class="zi5">包裹单号</p>
          <p class="zi6">{{ i.baoguoid }}</p>
        </div>

        <div class="zhong1">
          <p class="zi5">派件时间</p>
          <p class="zi6">{{ i.timestamp }}</p>
        </div>
        <div class="zhong1">
          <p class="zi5">柜机编号</p>
          <p class="zi6">{{ i.machineCode }}</p>
        </div>
        <div class="zhong1">
          <p class="zi5">柜机地址</p>
          <p class="zi6">{{ i.location }}{{ i.address }}</p>
        </div>
      </div>

      <!--      下部分-->
      <div class="xia">
        <button class="button1" @click="qjm(i.phone)">重发取件码</button>
      </div>


    </div>


  </div>

</template>

<script>

import {findparceltracking,update} from "@/api/ParcelTracking/parceltracking";
import {findqjm} from "@/api/ParcelTracking/qjm";


export default {
  name: 'ParcelTracking',
  data() {
    return {
      searchValue: this.query,
      query: {
        serchValue: '',
      },
      baoguostatus: [],
      phoneNumber: null,
      form:{
        baoguoid:null,
        qujianma:null,
      },
    };
  },
  filters: {
    formatPhoneNumber(phoneNumber) {
      if (!phoneNumber || phoneNumber.length < 7) {
        return phoneNumber;
      }
      const start = phoneNumber.slice(0, 3);
      const end = phoneNumber.slice(-4);
      return `${start}****${end}`;
    },
  },
  methods: {
    /*  跳转到详情 */
    tiaozhuan(id){
      console.log("sgmsfkgkskdgnjksdjgjsdijj",this.searchValue)
      this.$router.push({
        path: '/index/Detail',
        query: {
          id: id
        }
      })
    },
    /* 重发取件码  */
    qjm(phone) {
      // axios.get("http://localhost:11219/SetUp/SetUp/AccountSafe/qjm/" + phone).then(res => {
      //   if (res.data.code == 200) {
      //     this.$toast.success('重发成功,请在手机上查看');
      //   } else {
      //     this.$toast.fail('重发失败');
      //   }
      // })
      findqjm(phone).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.data)
          this.$toast.success('重发成功,请在手机上查看');
          this.form.qujianma=res.data.data
          this.form.baoguoid=this.searchValue
          update(this.form).then(res => {
            if(res.data.code==200){
              this.$toast.success('更新成功');
            }else{
              this.$toast.fail('更新失败');
            }
          })
      }
         else {
          this.$toast.fail('重发失败');
        }

      })
    },
    /* 顶部左箭头返回首页 */
    fanhui() {
      this.$router.push({path: '/parceltracking/ParcelTracking'})
    },
    /*  查询包裹详情  */
    findpackage() {
      // axios.get("http://localhost:11219/trackpackage/trackpackage/list/"+this.searchValue).then(res => {
      //   this.baoguostatus = res.data.data;
      //   console.log(this.baoguostatus)
      // })
      findparceltracking(this.searchValue).then(res => {
        this.baoguostatus = res.data.data;
        console.log(this.baoguostatus)
        if(this.baoguostatus.length==0){
          this.$toast('未查询到该包裹信息');
        }
      })
    }
  },
  created() {
    this.query = this.$route.query
    this.searchValue = this.query.serchValue
    this.findpackage();
  }
}
;

</script>


<style scoped>
/* 顶部盒子 */
.top {
  margin-top: 0px;
//border: 1px solid blue; width: 100%; height: 60px; background-color: white;
}

/* 包围左箭头和搜索框盒子 */
.top1 {
  width: 90%;
  height: 60px;
//border: 1px solid red;
}

/* 顶部左边箭头 */
.leftjiantou {
  float: left;
  margin-top: 17px;
}

/* 顶部搜索框 */
.sousuo1 {
//border: 1px solid red;
}

/* 顶部右边搜索样式 */
.zi2 {
  margin-right: 5px;
  font-size: 15px;
  margin-top: -40px;
//float: right; //border: 1px solid red; float: right;
}

/*  包裹详情样式 */
.detail {
  width: 95%;
  height: 350px;
  margin-left: 10px;
  margin-top: 20px;
  background-color: white;
  padding: 1px;
  //border: 1px solid red;
}

/*  整体背景颜色 */
body {
  background-color: #f5f5f5;
}

/* 上 */
.shang {
  width: 100%;
  height: 90px;
  border: 1px solid white;
}

/* 中 */
.zhong {
  width: 80%;
  height: 150px;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  margin-left: 40px;
  margin-top: 0px;
  border: 1px solid white;
}

.zhong1 {
  width: 100%;
  height: 25px;
  margin-top: 9px;
  border: 1px solid white;
}

.zi5 {
  float: left;
  margin-top: -5px;
}

.zi6 {
  float: right;
  margin-top: -5px;
}


/* 下 */
.xia {
  width: 100%;
  height: 50px;
//border: 1px solid red; float: right;
  margin-top: 10px;
}

.button1 {
  font-size: 15px;
  margin-top: 10px;
  margin-right: 38px;
  float: right;
  background-color: white;
  padding: 5px 15px;
  border: 1px solid #c4c4c4;

}


.shang1 {
  width: 50px;
  height: 40px;
//border: 1px solid red; margin-top: 30px;
  margin-left: 20px;
}


.shang2 {
  width: 230px;
  height: 70px;
//border: 1px solid red; margin-right: 100px;
  margin-top: -63px;
  float: right;
}

.zi3 {
  color: #44413d;
  margin-right: 170px;
//border: 1px solid red;
}

.shang3 {
//border: 1px solid blue; width: 100px;
  height: 30px;
  margin-left: 60px;
  margin-top: -63px;
}

.zi1 {
  font-size: 13px;
  color: #ffae36;
  margin-left: 0px;
}

.shang4 {
//border: 1px solid blue; width: 100px;
  height: 30px;
}

.shang5 {
//border: 1px solid orange; width: 100px;
  height: 30px;
  float: right;
  margin-top: -50px;
}

.icon1 {
//border: 1px solid blue; float: right;
  margin-top: -35px;
  margin-right: 15px;
}

.zi4 {
  color: #026fce;
}

.da {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}

.tixing {
  background-color: #ffffc8;
  color: #ffa413;
  border: none;
  width: 200px;

}


</style>
